<template lang="pug">
div
  multiselect(
    :options="all",
    :selected="selected",
    :multiple="true",
    :searchable="true",
    :taggable="true",
    placeholder="相关病史",
    @tag="addTag",
    @update="updateSelectedTags",
    :show-labels="false",
    :close-on-select="false",
  )
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  name: 'relevantMedicalHistoryTag',
  components: {
    Multiselect,
  },
  props: ['selected'],
  data () {
    return {
      all: [],
    }
  },
  methods: {
    addTag(item) {
      this.all.push(item)
      this.all = _.uniq(this.all)
      this.selected.push(item)
      this.selected = _.uniq(this.selected)
    },
    updateSelectedTags(item) {
      this.selected = _.uniq(item)
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
